<template>
<div class="Course">
  <div class="head">
        <div class="search">
          <el-button type="primary" icon="el-icon-plus"  style="float: left;margin: 12px 2px; height: 100%" @click="AddClass">添加课程</el-button>
          <div class="btnSearch">
            <el-button type="primary" icon="el-icon-search" @click="updateTable">
              搜索
            </el-button>
          </div>
          <el-input v-model="classInput" placeholder="请输入内容"></el-input>
        </div>
  </div>
  <div class="CourseTable">
  <el-table
      :data="tableData"
      :header-cell-style="{textAlign:'center',background:'#00ffeb'}"
      :cell-style="{textAlign:'center'}"
      :stripe="true"
      style="width: 1020px;margin: auto">
    <el-table-column
        prop="className"
        label="课程名"
        width="270">
    </el-table-column>
    <el-table-column
        prop="classTeacher"
        label="教师名称"
        width="270">
    </el-table-column>
    <el-table-column
        label="操作"
        width="460">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" @click="updateClass(scope.row)" >修改</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="deleteClass(scope.row)">删除</el-button>
        <el-button type="primary" icon="el-icon-upload " @click="uploadVideo(scope.row)">上传课程视频</el-button>
      </template>
    </el-table-column>
  </el-table>
    <AddClass ref="edit" @updateTable="updateTable"></AddClass>
    <UpVideo ref="vide"></UpVideo>
</div>
  <div>
    <el-divider ></el-divider>
    <div style="height:0;display: flex; margin: auto">
      <el-pagination
          @current-change="(index)=> getClassList(this.classInput,index)"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="total"
          :current-page="index"
          style="margin: 0 auto"
      >
      </el-pagination>
    </div>
  </div>
</div>
</template>

<script>
import AddClass from "@/components/class/AddClass";
import UpVideo from "@/components/class/UpVideo";
export default {
  name: "Class",
  components: {UpVideo, AddClass},
  data(){
    return{
      tableData:[],
      classInput:'',
      index:1,
      total:1,
    }
  },
  methods:{
    getClassList(key,index){
      this.$axios.post(
          '/getClassList',
          {
            index:index,
            key:key,
            userId:''
          }
      ).then(res=>{
        this.tableData=res.data;
      });
    },
    updateClass(item){
      this.$refs['edit'].setEdit(item)
      this.$refs['edit'].dialogFormVisible = true;
    },
    AddClass(){
      let item={
        classId:'',
        className:'',
        classTeacher:'',
        classImg:'',
      }
      this.$refs['edit'].setEdit(item)
      this.$refs['edit'].dialogFormVisible = true;
    },
    updateTable(){
      this.getClassList(this.classInput,this.index);
      this.$axios.post(
          '/getClassNum',
          {key:this.classInput,
            userId:''
          }
      ).then(resp=>{this.total=resp.data});
    },
    deleteClass(inex){
      this.$confirm('是否删除？', '确认信息', {
        confirmButtonText: '是',
        cancelButtonText: '否'
      }).then(() => {
        this.$axios.post('/deleteClass',{
          id:inex.classId})
            .then(resp=> {
              console.log(resp.data)
            if(resp.data.code===200) {
              this.$message({
                type: 'success',
                message: '删除成功'
              });
            }
            else {
              this.$message({
                type: 'error',
                message: '删除失败'
              });
            }
            this.updateTable();
        })
      }).catch(() => {})
    },
    uploadVideo(item){
      this.$refs['vide'].setEdit(item)
      this.$refs['vide'].dialogFormVisible = true;
    }


  },
  mounted() {
    this.getClassList(this.classInput,this.index);
    this.$axios.post(
        '/getClassNum',
        {key:this.classInput,
          userId:''
        }
    ).then(resp=>{this.total=resp.data});
  },

}
</script >

<style  scoped>
.Course{
  background-color: white;
  width: 98%;
  margin: auto;
  display: block;
  height: 99%;
}
.CourseTable{
  width: 1200px;
  height: 700px;
  margin: 2px auto auto;
}
.head{
  height: 75px;
  background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));
  margin-top: 5px;
}
.btnSearch{
  display: flex;
  float: right;
  margin: 12px;
}
.el-input {
  width: 200px;
  border: 1px solid #00aeff;
  border-radius: 12px;
  display: flex;
  margin: 12px;
  float: right;
}
.el-input__inner{
  border-radius: 12px;
}

</style>
